<template>
  <div class="datav_map">
    <div class="datav_map_img">
      <img src="./../../assets/img/index/datav_count_3.png" alt />
    </div>
    <div class="datav_map_content">
      <div class="datav_part_title">
        <span>订单量统计明细</span>
      </div>
      <div class="datav_part_body">
        <div id="datav_count3" style="width:100%;height:100%;"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "datav_map",
  data() {
    return {};
  },
  props: {
    order: {
      type: Array,
      default: () => {
       []
      }
    }
  },
  components: {},
  mounted() {
    var that = this;
    this.$nextTick(() => {
      that.get_count();
    });
  },
  methods: {
    get_count() {
      var year = [];
      var number = [];
      var number_shop = [];
      for(let i=0;i<this.order.length;i++){
        year.push(this.order[i].year);
        number.push(this.order[i].number);
        number_shop.push(this.order[i].number_shop);
      }
      var option = {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "14%",
          top: "16%",
          containLabel: true
        },
        legend: {
          data: ["自营", "商户"],

          bottom: 0,
          textStyle: {
            color: "#fff"
          },
          itemWidth: 12,
          itemHeight: 10
          // itemGap: 35
        },
        xAxis: {
          type: "category",
          data: year,
          axisLine: {
            lineStyle: {
              color: "white"
            }
          },
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: "Microsoft YaHei"
            }
          }
        },

        yAxis: {
          type: "value",

          axisLine: {
            show: false,
            lineStyle: {
              color: "white"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.3)"
            }
          },
          axisLabel: {}
        },
        dataZoom: [
          {
            show: false,
            height: 12,
            xAxisIndex: [0],
            bottom: "8%",
            start: 10,
            end: 90,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5"
            },
            textStyle: {
              color: "#fff"
            },
            borderColor: "#90979c"
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35
          }
        ],
        series: [
          {
            name: "自营",
            type: "bar",
            barWidth: "15",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#52ffff"
                  },
                  {
                    offset: 1,
                    color: "#2c8ab8"
                  }
                ])
              }
            },
            data: number
          },
          {
            name: "商户",
            type: "bar",
            barWidth: "15",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#ba4275"
                  },
                  {
                    offset: 1,
                    color: "#f53f8c"
                  }
                ])
              }
            },
            data: number_shop
          }
        ]
      };

      var app = {
        currentIndex: -1
      };
      //   setInterval(function () {
      //     var dataLen = option.series[0].data.length;

      //     // 取消之前高亮的图形
      //     myChart.dispatchAction({
      //       type: 'downplay',
      //       seriesIndex: 0,
      //       dataIndex: app.currentIndex
      //     });
      //     app.currentIndex = (app.currentIndex + 1) % dataLen;
      //     //console.log(app.currentIndex);
      //     // 高亮当前图形
      //     myChart.dispatchAction({
      //       type: 'highlight',
      //       seriesIndex: 0,
      //       dataIndex: app.currentIndex,
      //     });
      //     // 显示 tooltip
      //     myChart.dispatchAction({
      //       type: 'showTip',
      //       seriesIndex: 0,
      //       dataIndex: app.currentIndex
      //     });

      //   }, 1000);
      var myChart = this.$echarts.init(document.getElementById("datav_count3"));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    }
  }
};
</script>
<style lang="less" scoped>
.datav_map {
  width: 100%;
  position: relative;
  .datav_map_img {
    width: 100%;
    img {
      // width: 100%;
      height: 100%;
    }
  }
  .datav_map_content {
    width: 100%;
    padding: 10px 20px 20px 20px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-flow: column;

    .datav_part_title {
      width: 100%;
    }
    .datav_part_body {
      width: 100%;
      height: 100%;
      flex: 1;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: flex-start;
    }
  }
}
</style>
